<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>入库单信息</span>
                <el-tag type="primary" v-if="formData.inboundCode">入库单号: {{ formData.inboundCode }} </el-tag>
            </div>
        </template>

        <el-form :model="formData" label-width="120px">
            <!-- 第一行 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="入库单号">
                        <el-input v-model="formData.inboundCode" readonly disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入库名称">
                        <el-input v-model="formData.inboundName" readonly placeholder="请输入入库名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="状态">
                        <el-select v-model="formData.inboundStatus" disabled placeholder="请选择状态" style="width: 100%">
                            <el-option label="待入库" :value="0"></el-option>
                            <el-option label="已入库" :value="1"></el-option>
                            <el-option label="已取消" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第二行 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="计划ID">
                        <el-input v-model="formData.planId" readonly placeholder="请输入计划ID"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="仓库ID">
                        <el-input v-model="formData.warehouseId" readonly placeholder="请输入仓库ID"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="产品ID">
                        <el-input v-model="formData.productId" readonly placeholder="请输入产品ID"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第三行 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="批次号">
                        <el-input v-model="formData.batchNo" readonly placeholder="请输入批次号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入库员ID">
                        <el-input v-model="formData.operatorId" readonly placeholder="请输入入库员ID"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="质检员ID">
                        <el-input v-model="formData.checkId" readonly placeholder="请输入质检员ID"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第四行 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="质检时间">
                        <el-date-picker v-model="formData.checkTime" type="datetime" placeholder="选择质检时间"
                            style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" readonly>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="计划入库数量">
                        <el-input-number v-model="formData.totalQuantity" :min="0" :precision="2" :step="0.1"
                            controls-position="right" style="width: 100%" readonly>
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="实际入库数量">
                        <el-input-number v-model="formData.actualQuantity" :min="0" :precision="2" :step="0.1"
                            controls-position="right" style="width: 100%" readonly>
                        </el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第五行 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="入库日期">
                        <el-date-picker v-model="formData.createTime" type="datetime" placeholder="选择入库日期"
                            style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" readonly>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 统计信息卡片 -->
            <el-card class="summary-card">
                <template #header>
                    <div class="summary-header">统计信息</div>
                </template>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="stat-item">
                            <div class="stat-label">计划数量</div>
                            <div class="stat-value">{{ formData.totalQuantity || 0 }}</div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="stat-item">
                            <div class="stat-label">实际数量</div>
                            <div class="stat-value">{{ formData.actualQuantity || 0 }}</div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="stat-item">
                            <div class="stat-label">完成进度</div>
                            <div class="stat-value">{{ completionRate }}%</div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>

        <!-- 操作按钮 -->
        <div class="form-actions">
            <el-button @click="goBack">取消</el-button>
        </div>
    </el-card>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import request from '@/api/request'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

const emits = defineEmits(['ref-table'])
const props = defineProps(["data"])

// 表单数据 - 包含所有实体类字段
const formData = ref({
    ...props.data
})

// 完成进度计算
const completionRate = computed(() => {
    if (!formData.value.totalQuantity || formData.value.totalQuantity === 0) return 0
    return ((formData.value.actualQuantity / formData.value.totalQuantity) * 100).toFixed(1)
})

// 重置表单
const resetForm = () => {
    ElMessageBox.confirm('确定要重置所有修改吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 重置为原始数据
        Object.assign(formData.value, props.data)
        ElMessage.success('重置成功')
    }).catch(() => {
        // 取消操作
    })
}

// 返回
const goBack = () => {
    emits("ref-table")
}

// 提交表单
const submitForm = async () => {
    try {
        // 验证表单
        if (!formData.value.inboundName) {
            ElMessage.warning('请输入入库名称')
            return
        }

        if (!formData.value.planId) {
            ElMessage.warning('请输入计划ID')
            return
        }

        if (!formData.value.warehouseId) {
            ElMessage.warning('请输入仓库ID')
            return
        }

        // 更新数据
        await request({
            url: '/inboundOrder/update',
            method: 'put',
            data: formData.value
        })

        ElMessage.success('保存成功')
        emits("ref-table")
    } catch (error) {
        console.error('保存失败:', error)
        ElMessage.error('保存失败')
    }
}

// 初始化加载
onMounted(() => {
    // 如果是从列表页面传过来的数据，已经包含在props.data中
    console.log('接收到的数据:', props.data)
})
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.form-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
}

.summary-card {
    margin: 20px 0;
    background-color: #f8f9fa;
}

.summary-header {
    font-weight: 600;
    color: #409EFF;
}

.stat-item {
    text-align: center;
    padding: 15px;
}

.stat-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 20px;
    font-weight: bold;
    color: #409EFF;
}

.el-row {
    margin-bottom: 20px;
}

.el-form-item {
    margin-bottom: 0;
}

@media (max-width: 1200px) {
    .el-col {
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    .el-col {
        width: 100%;
        margin-bottom: 15px;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .el-button {
        width: 100%;
        margin-bottom: 10px;
    }
}
</style>